<!DOCTYPE HTML>
<html>
	<head>
		<title>please enter your title</title>
		<meta charset="utf-8">
		<meta name="Author" content="潭州学院-阿飞老师">
		<style type='text/css'>
			*{ margin:0; padding:0;font-family:'Microsoft yahei';}
			#wrap{
				width:100%;
				height:540px;
				min-width:1000px;
				margin:20px auto 0;
				position:relative;
			}
			#pic{
				width:870px;
				height:540px;
				margin:0 auto;
				position:relative;
			}
			#pic ul li{
				list-style:none;
				background-size : cover;
				width:870px;
				height:540px;
				position:absolute;
				display:none;
			}
			#left , #right{
				width:32px;
				height:63px;
				cursor:pointer;
				position:absolute;
				top:50%;
				margin-top:-31px;
			}
			#left{ left:-32px; background:url(img/arrow.jpg) top left;}
			#right{ right:-32px; background:url(img/arrow.jpg) top right;}

			#tab{
				width:100%;
				height:100px;
				border:1px solid #ddd;
				position:relative;
				margin-top:20px;
			}
			#tab #show{
				padding:0 30px;
				height:100px;
				position:relative;
				z-index:2;
			}
			#tab #show div{
				width:100%;
				height:100px;
				overflow:hidden;
			}
			#tab ul{
				width:10000%;
				margin-left:0;
				position:relative;
			}
			#tab ul li{
				width:120px;
				height:75px;
				margin:11px 15px;
				background-size:cover;
				float:left;
				list-style:none;
			}
			#prev,#next{
				width:30px;
				height:100px;
				border:1px solid #ddd;
				font-size:30px;
				font-weight:bold;
				line-height:100px;
				text-align:center;
				cursor:pointer;
				color:#999;
				position:absolute;
				top:0;
				background:#fff;
				z-index:3;
			}
			#prev{left:0;}
			#next{right:0;}
			#prev:hover , #next:hover{
				background:#43A4EF;
				color:#fff;
			}
			#tab li#mark{
				width:130px;
				height:89px;
				background:url(img/mark.png);
				position:absolute;
				left:0;
				top:0;
				z-index:-1;
			}
		</style>
	</head>
	<body>
		
		<div id="wrap">
			<div id="pic">
				<ul></ul>
				<div id='btn'>
					<div id="left"></div>
					<div id="right"></div>
				</div>
			</div>
		</div>

		<div id="tab">
			<div id='prev' onselectstart='return false'>&lt;</div>
			<div id='show'><div><ul></ul></div></div>
			<div id='next' onselectstart='return false'>&gt;</div>
			
		</div>

		<script type="text/javascript" src='js/jquery-1.12.1.min.js'></script>
		<script type="text/javascript">
			var $picUl = $('#pic ul');
			var $picLi = null;
			var $tabUl = $('#tab ul');
			var $tabLi = null;
			var $mark = null;
			var $next = $('#next');
			var $prev = $('#prev');
			var $left = $('#left');
			var $right = $('#right');
			var index = 0;
			init();

			$next.click(function(){
				var nowmLeft = parseInt( $tabUl.css('marginLeft') );
				var max = $tabLi.length * ( $tabLi.width() + 30 ) - ($('#tab').width() - 30*2);
				
				nowmLeft = nowmLeft - $('#tab').width() - 30*2;
				
				nowmLeft = Math.max( -max , nowmLeft );
				$tabUl.stop().animate({
					marginLeft : nowmLeft + 'px'
				});
			});

			$prev.click(function(){
				var nowmLeft = parseInt( $tabUl.css('marginLeft') );
				var min = 0;
				nowmLeft = nowmLeft + $('#tab').width() - 30*2;
				nowmLeft = Math.min( min , nowmLeft );
				$tabUl.stop().animate({
					marginLeft : nowmLeft + 'px'
				});
			});

			$left.click(function(){
				$picLi.eq(index).fadeOut(200);
				index==0?index=$tabLi.length-1:index--;
				move();
			});
			$right.click(function(){
				$picLi.eq(index).fadeOut(200);
				index ++;
				index %= $tabLi.length;
				move();
			});

			$tabLi.click(function(){
				$picLi.eq(index).fadeOut(200);
				index = $(this).index();
				move();
			});

			function move(){
				$mark.css({
					left : $tabLi.eq(index).position().left - 5 + 'px',
					top : $tabLi.eq(index).position().top - 9 + 'px'
				});
				$picLi.eq(index).fadeIn(200);

				var left = -($tabLi.eq(index).position().left + 20 - ($('#tab').width() - 30*2)/2);
				var max = $tabLi.length * ( $tabLi.width() + 30 ) - ($('#tab').width() - 30*2);
				var min = 0;
				left = Math.max( -max , left );
				left = Math.min( min , left );
				$tabUl.stop().animate({
					marginLeft : left + 'px'
				});
			};
			
			function init(){
				for (var i=0;i<22;i++ )
				{
					var $li = $('<li></li>');
					var $li1 = $('<li></li>');
					$picUl.append( $li );
					$tabUl.append( $li1 );
					$li.css('backgroundImage' , 'url(img/'+ (i+1) +'.jpg)');
					$li1.css('backgroundImage' , 'url(img/'+ (i+1) +'.jpg)');
				};
				
				$picLi = $('#pic ul li');
				$tabLi = $('#tab ul li');
				$tabUl.append('<li id="mark"></li>');
				$mark = $('#mark');
				$picLi[0].style.display = 'block';
				$mark.css({
					left : $tabLi.eq(index).position().left - 5 + 'px',
					top : $tabLi.eq(index).position().top - 9 + 'px'
				});
			};
			
		</script>
	</body>
</html>